<template>
	<view class="member container">
		<!-- 会员 -->
		<view class="isMember" v-if="false">
			<view class="top1">
				<view class="top1-l">
					<view>
						<text class="text1">Dennis.ZOO</text>
						<text class="text2">VIP</text>
					</view>
					<view class="text3">会员将于2018-12-31到期</view>
				</view>
				<view class="top1-r">
					<text @click="toRenew">续费</text>
				</view>
			</view>
			<view class="top2">
				<view class="top2-item">
					<view class="text1">累计收益<text>？</text></view>
					<view class="text2">154.60</view>
				</view>
				<view class="top2-item">
					<view class="text1">累计省钱<text>？</text></view>
					<view class="text2">154.60</view>
				</view>
			</view>
		</view>
		<!-- 非会员 （从未开通过会员） -->
		<view class="noMember">
			<view class="top1">
				<view class="top1-l">
					<view class="text1">开通VIP会员</view>
					<view class="text2">享受超值权益</view>
				</view>
				<view class="top1-r">
					<view class="text3" @click="toOpening">开通会员</view>
					<view class="text4">每月仅需10元</view>
				</view>
			</view>
			<view class="top2">
				<view class="top2-item">
					<image src="" mode=""></image>
					<text>购物享优惠</text>
				</view>
				<view class="top2-item">
					<image src="" mode=""></image>
					<text>销售得收益</text>
				</view>
				<view class="top2-item">
					<image src="" mode=""></image>
					<text>销售赚积分</text>
				</view>
				<view class="top2-item">
					<image src="" mode=""></image>
					<text>拉新送红包</text>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="block-item" @click="toFans">
				<image src="" mode=""></image>
				<text>我的人脉</text>
			</view>
			<view class="block-item" @click="toIntegral">
				<image src="" mode=""></image>
				<text>积分明细</text>
			</view>
			<view class="block-item">
				<image src="" mode=""></image>
				<text>口碑商品</text>
			</view>
			<view class="block-item" @click="toMaterial">
				<image src="" mode=""></image>
				<text>素材中心</text>
			</view>
			<view class="block-item">
				<image src="" mode=""></image>
				<text>商学院</text>
			</view>
		</view>
		<view class="block2">
			
		</view>
		
		<commonTabbar></commonTabbar>
	</view>
</template>

<script>
	import commonTabbar from '../../../components/commonTabbar.vue'
	export default {
		components: {
			commonTabbar
		},
		data() {
			return {

			};
		},
		methods: {
			/* 开通会员 */
			toOpening(){
				uni.navigateTo({
					url: '/pages/member/opening/opening',
				});
			},
			/* 续费会员 */
			toRenew(){
				uni.navigateTo({
					url: '/pages/member/renew/renew',
				});
			},
			/* 我的人脉 */
			toFans(){
				uni.navigateTo({
					url: '/pages/member/fans/fans',
				});
			},
			/* 积分明细 */
			toIntegral(){
				uni.navigateTo({
					url: '/pages/member/integral/integral',
				});
			},
			/* 素材中心 */
			toMaterial(){
				uni.navigateTo({
					url: '/pages/member/material/material',
				});
			}
		}
	}
</script>

<style>
	.member {
		width: 100%;
		padding: 20upx 30upx;
		font-size: 24upx;
	}
	.isMember .top1 {
		width: 649upx;
		height: 160upx;
		background-color: #797979;
		display: flex;
		color: #fff;
		margin: auto;
	}
	.isMember .top1-l {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 30upx;
	}
	.isMember .top1-l .text1 {
		font-size: 36upx;
	}
	.isMember .top1-l .text2 {
		padding: 0upx 15upx;
		background-color: #333333;
		border-radius:6upx;
		margin-left: 20upx;
	}
	.isMember .top1-l .text3 {
		color: #333333;
		margin-top: 20upx;
	}
	.isMember .top1-r {
		width: 182upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.isMember .top1-r text {
		display: inline-block;
		width:142upx;
		height:56upx;
		border-radius:6upx;
		background-color: #555555;
		text-align: center;
		line-height: 56upx;
	}
	.isMember .top2 {
		width: 100%;
		display: flex;
		margin-top: 20upx;
	}
	.isMember .top2-item {
		flex: 1;
		height: 180upx;
		background-color: #696969;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 30upx;
		border-radius: 6upx;
	}
	.isMember .top2-item:last-child {
		margin-left: 20upx;
	}
	.isMember .top2-item .text1 text {
		width: 32upx;
		height: 32upx;
		background-color: #565656;
		display: inline-block;
		border-radius: 100%;
		margin-left: 20upx;
		text-align: center;
		line-height: 32upx;
	}
	.isMember .top2-item .text2 {
		line-height: 80upx;
		font-size: 36upx;
	}
	
	.noMember .top1 {
		width: 649upx;
		height: 160upx;
		background-color: #797979;
		display: flex;
		color: #fff;
		margin: auto;
		padding: 0 20upx;
	}
	.noMember .top1 .top1-l {
		color: #333;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.noMember .top1 .text2 {
		font-size: 40upx;
		margin-top: 20upx;
	}
	.noMember .top1 .top1-r {
		width: 200upx;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	.noMember .top1 .text3 {
		display: inline-block;
		width:142upx;
		height:56upx;
		border-radius:6upx;
		background-color: #555555;
		text-align: center;
		line-height: 56upx;
		font-size: 26upx;
	}
	.noMember .top1 .text4 {
		margin-top: 10upx;
	}
	.noMember .top2 {
		width: 100%;
		height: 192upx;
		background-color: #D7D7D7;
		display: flex;
	}
	.noMember .top2-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.noMember .top2-item image {
		width: 75upx;
		height: 75upx;
		background-color: #F5F5F5;
		border-radius: 100%;
	}
	.noMember .top2-item text {
		display: block;
		margin-top: 20upx;
	}
	.block {
		overflow: hidden;
		margin-top: 50upx;
	}
	.block-item {
		width: 33.33%;
		float: left;
		height: 220upx;
		text-align: center;
		padding-top: 30upx;
	}
	.block-item image {
		width:108upx;
		height:108upx;
		background-color: #E6E6E6;
		margin: auto;
		border-radius: 100%;
	}
	.block-item text {
		display: block;
		margin-top: 30upx;
	}
	.block2 {
		width: 100%;
		height: 200upx;
		background-color: #B0B0B0;
		margin-top: 50upx;
		border-radius: 6upx;
	}
</style>
